<template>
    <div>
       <div class="title_bt">
            <div class="bt">代码位</div>
            <el-select v-model="select_codebits_val" filterable placeholder="请选择代码位">
                <el-option
                    v-for="item in select_codebits" 
                    @click.native="filterselect(item.id)"
                    :key="item.name"  
                    :label="item.name" 
                    :value="item.name">
                </el-option>
            </el-select>
            <div class="fr">
                <div class="block">
                    <el-date-picker
                    size="small"
                    v-model="time"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    @change="changeTime"
                    align="right">
                    </el-date-picker>
                </div>
            </div>
            
        </div>
        <!-- <div class="indextips">
            <el-tag><i class="el-icon-message-solid"></i>提示的文字会显示的的</el-tag>
        </div> -->
        <panecont v-if="false"></panecont>
        <el-row :gutter="40" >
            <el-col :xs="24" :md="24" :lg="24" class="card-panel-col">
                <!-- ti -->
                <div class="cart_title">
                    <div class="bt" v-if="barcartdata.title[1]">{{barcartdata.title[0]}} - {{barcartdata.title[1]}}</div> 
                    <div class="select">
                        <el-select 
                        v-model="title_value" @change="changeChartTitle"
                         multiple  placeholder="请选择" >
                            <el-option
                                v-for="item in barcartdata.data"
                                :key="item.title"
                              
                                :label="item.title" :value="item.title" >
                                <span style="float: left">{{ item.title }}</span>
                                <span class="bg" :style="'position: absolute;width: 20px; height: 5px; display: block;top: 50%;right: 25%;background:'+item.color"></span>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                 <div class="cart">
                    <linecart :height="linecartheight+'px'" :Chartdata="barcartdata" :titlevalue='title_value' :theme="'jazz'"></linecart>
                 </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    // import barcart  from './comment/barcart.vue';
    import linecart  from './comment/lincart.vue';
    import panecont  from './comment/panecont.vue';
    import { axios_index,axios_adversense} from "@/api/infor";
    export default{
        components:{
            panecont,
            linecart
        },
        data(){
            return{
                barcartdata: {
                    title:[],
                    xAxis:[],
                    data:[
                        {
                            title:'展现量',
                            list: [ ],
                            color:"#5470c6"
                        },
                        {
                            title:'点击量',
                            list: [ ],
                            color:"#91cc75"
                        },
                        {
                            title:'请求量',
                            list: [ ],
                            color:"#fac858"
                        },
                    ]
                },
                title_value:[],
                select_codebits_val:'全部',
               select_codebits:[{name:"全部",id:'0'}],
                pages:{
                    start_date:'',
                    end_date:'',
                    adsense_id:0,
                },
                value: '',
                time:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }],
                    onPick:(time) => {
                        // 如果选择了只选择了一个时间
                        if (!time.maxDate) {
                            let timeRange = 60*24*60*60*1000 // 2天
                            this.minTime = time.minDate.getTime() - timeRange // 最小时间--前面两天
                            this.maxTime = time.minDate.getTime() + timeRange // 最大时间--后面两天
                            // 如果选了两个时间，那就清空本次范围判断数据，以备重选
                        } else {
                            this.minTime = this.maxTime = null
                        }
                    },
                    disabledDate:(time) => {
                        // onPick后触发
                        // 该方法会轮询当3个月内的每一个日期，返回false表示该日期禁选
                        if(this.minTime && this.maxTime){
                            return time.getTime() < this.minTime || time.getTime() > this.maxTime
                        }
                    }
                },
            }
        },
        computed:{
          linecartheight(){
             return window.innerHeight-440
          }
        },
        created(){
            this.time=[this.formatDate(new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)),this.formatDate(new Date())];
             this.getdatalist("refresh")
             this.axiosAdversense()
             this.barcartdata.title=this.time;
            let that=this
            var titlevalue=()=>{  //默认显示头2条
                let arr=[];
                that.barcartdata.data.slice(0,3).forEach((item)=>{arr.push(item.title);})
                return arr;
            }
            that.title_value= titlevalue();
        },
        methods:{
            formatDate(date) {
                // 格式化日期为YYYY-MM-DD格式
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
                },
            changeChartTitle(val){
                 this.title_value=val.slice(-3);
                 if(val.length==0){
                     this.title_value=['展现量']
                 }
            },
            changeTime(val){
                this.barcartdata.title=val;
                 this.pages.start_date= new Date(val[0]).getTime()/1000;
                 this.pages.end_date= new Date(val[1]).getTime()/1000;
                 this.getdatalist("refresh")
                
            },
             // 下拉框选项搜索
        filterselect(e){
            this.pages.adsense_id=e;
             this.getdatalist("refresh")
        },
            // 获取列表数据
        getdatalist(){
            this.pages.start_date= new Date(this.time[0]).getTime()/1000;
            this.pages.end_date= new Date(this.time[1]).getTime()/1000;
            axios_index(this.pages).then((res) => {
                if(res.data.code==1){
                    if(res.data.code_date.length<1){
                    this.$message('暂无数据');
                    }
                    let cart_time=[]
                    let cart_data1=[]
                    let cart_data2=[]
                    let cart_data3=[]
                    res.data.code_date.forEach((item)=>{
                        cart_time.push(item.s_date)
                        cart_data1.push(item.s_statistics)
                        cart_data2.push(item.c_statistics)
                        cart_data3.push(item.r_statistics)

                    })
                    this.$nextTick(() => {
                        this.barcartdata.xAxis=cart_time;
                        this.barcartdata.data[0].list=cart_data1;
                        this.barcartdata.data[1].list=cart_data2;
                        this.barcartdata.data[2].list=cart_data3;
                    });
                }
            }).catch(( )=>{})
        },
         // 获取代码位的分类
        axiosAdversense(){
           axios_adversense({model:2,flow_type:0}).then((res) => {
                 this.select_codebits.push(res.data.data);
                 this.select_codebits=this.select_codebits.flat(Infinity)
            }).catch(( )=>{})
        },

        }
    }
</script>
<style lang="scss" scoped>
    .title_bt +.indextips{
         margin-block: 20px;
    }
    .title_bt  .fr{
        float: right;
        margin-right: 20px;
    }
    .cart{
        background: #fff;
        border-radius: 5px;
        padding: 15px;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);
        margin-bottom: 20px;
    }
    .cart_title{
        background: #fff;
        border-bottom: 3px solid #f5f5f5;
        margin-bottom: 20px;
        line-height: 40px;
        padding: 10px;
        height: 40px;
        .bt{
            color: #888;
            font-size: 14px;
            font-weight: bold;
            float: left;
        }
        .select{
            float:right;
            input{
                border:none !important
            }
        }
    }
    @media (max-width:550px) {
        .el-row{
            padding: 0px;
        }
  }
</style>
<style lang="scss">
.cart_title .select .el-select{
    width: 260px;
}
 .cart_title{
        .select{
            float:right;
            .el-input__inner{
                 background: none;
                 border:none;
                 background: #f5f5f5;
            }
        }
    }
.indextips{
    height: 30px;
    line-height: 30px;
    .el-tag{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }
  }

</style>

 